<template>
  <div class="main_box">
    <div class="detail_wrap">
      <div class="tit">
        <h2>基础信息</h2>
        <el-button plain size="small" type="success" icon="fa fa-mail-forward" @click="returnList"> 返 回</el-button>
      </div>
      <div class="con">
        <ul>
          <!--<li class="photo">
            <label class="label">头像:</label>
            <span><img :src=hospitalData.hospitalImageUrl /></span>
          </li>-->
          <li>
            <label class="label">医院名称:</label>
            <span>{{ hospitalData.hospitalName }}</span>
          </li>
          <li>
            <label class="label">医院类型:</label>
            <span>{{ formatHospitalType(hospitalData.hospitalType) }}</span>
          </li>
          <li>
            <label class="label">医院简称:</label>
            <span>{{ hospitalData.hospitalShortName }}</span>
          </li>
          <li>
            <label class="label">营业时间:</label>
            <span>{{ hospitalData.businessHours }}</span>
          </li>
          <li>
            <label class="label">是否需要结果提醒:</label>
            <span>{{ formatIsRemind(hospitalData.isRemind) }}</span>
          </li>
          <li>
            <label class="label">影像预约是否需要支付:</label>
            <span>{{ formatIsRemind(hospitalData.isAppointPay) }}</span>
          </li>
          <!--          <li>
                      <label class="label">核酸支付方式:</label>
                      <span>{{formatHsPayType(hospitalData.isHsPay)}}</span>
                    </li>-->
          <!--<li>
            <label class="label">成立时间</label>
            <span>{{hospitalData.hospitalEstablishDate}}</span>
          </li>-->
          <li>
            <label class="label">所在区域:</label>
            <span><em>{{ hospitalData.provinceName }}{{ hospitalData.cityName }}{{ hospitalData.areaName }}</em></span>
          </li>
          <!--<li>
            <label class="label">所在商圈</label>
            <span>{{hospitalData.tradeAreaName}}</span>
          </li>-->
          <li>
            <label class="label">详细地址:</label>
            <span>{{ hospitalData.hospitalAddress }}</span>
          </li>

          <li>
            <label class="label">是否添加报告单编号</label>
            <span>{{ formatAddHeaderFlag(hospitalData.addHeaderFlag) }}</span>
          </li>
          <li>
            <label class="label">联系人姓名:</label>
            <span>{{ hospitalData.contactsName }}</span>
          </li>
          <li>
            <label class="label">联系人职称:</label>
            <span>{{ hospitalData.contactsTitle }}</span>
          </li>
          <li>
            <label class="label">联系人手机号码:</label>
            <span>{{ hospitalData.contactsTel }}</span>
          </li>
          <li>
            <label class="label">联系人邮箱地址:</label>
            <span>{{ hospitalData.contactsEmail }}</span>
          </li>
          <li>
            <label class="label">医院介绍:</label>
            <span>{{ hospitalData.hospitalIntroduce }}</span>
          </li>
          <!--          <li>
                      <label class="label">关联采样价格模板编号:</label>
                      <span>{{hospitalData.hsModelId}}</span>
                    </li>
                    <li>
                      <label class="label">关联采样价格模板名称:</label>
                      <span>{{hospitalData.hsModelName}}</span>
                    </li>
                    <li>
                      <label class="label">核酸海报:</label>
                      <div class="poster-btn">
                        <button v-if="!hospitalData.hsBillUrl" @click="createHsHb">生成海报</button>
                        <button v-if="hospitalData.hsBillUrl" @click="createHsHb">更新海报</button>
                        <button v-if="hospitalData.hsBillUrl" @click="viewHsHb">预览海报</button>
                        <button v-if="hospitalData.hsBillUrl" @click="downloadHsHb">下载海报</button>
                      </div>
                    </li>
                    <li>
                      <label class="label">医院核酸二维码:</label>
                      <div id="qrCode" ref="qrCodeDiv"></div>
                    </li>-->
          <li>
            <label class="label">开发业务员:</label>
            <span>{{ hospitalData.developUserName }}</span>
          </li>
          <li>
            <label class="label">维护业务员:</label>
            <span>{{ hospitalData.keepUserName }}</span>
          </li>
          <li>
            <label class="label">合作折扣:</label>
            <span>{{ hospitalData.discount }}%</span>
          </li>
          <li>
            <label class="label">合作协议:</label>
            <el-image :src="contractImageList[0]" :preview-src-list="contractImageList">
            </el-image>
          </li>
          <li>
            <label class="label">营业执照:</label>
            <el-image :src="hospitalData.license" :preview-src-list="[hospitalData.license]">
            </el-image>
          </li>
          <li>
            <label class="label">资质证书:</label>
            <el-image :src="hospitalData.qualificate" :preview-src-list="[hospitalData.qualificate]">
            </el-image>
          </li>


          <!--<li>
            <label class="label">营业执照图片</label>
            <span><img v-show="hospitalData.businessLicenceUrl" :src=hospitalData.businessLicenceUrl /></span>
          </li>
          <li>
            <label class="label">营业执照时间</label>
            <span>{{hospitalData.businessLicenceValidity}}</span>
          </li>
          <li>
            <label class="label">医院执业许可证图片</label>
            <span><img v-show="hospitalData.medicalLicenceUrl" :src=hospitalData.medicalLicenceUrl /></span>
          </li>
          <li>
            <label class="label">医院执业许可证时间</label>
            <span>{{hospitalData.medicalLicenceValidity}}</span>
          </li>
          <li>
            <label class="label">广告审查证明图片</label>
            <span><img v-show="hospitalData.medicalAdUrl" :src=hospitalData.medicalAdUrl /></span>
          </li>
          <li>
            <label class="label">广告审查证明时间</label>
            <span>{{hospitalData.medicalAdValidity}}</span>
          </li>-->

        </ul>
        <div class="tit">
          <h2>医检折扣</h2>
        </div>
        <el-table :data="tableList" style="width:1000px;margin:14px 0">
          <el-table-column type="index" label="序号" align="center" width="100"></el-table-column>
          <el-table-column prop="institutionName" label="医检名称" align="center"></el-table-column>
          <el-table-column prop="discount" label="折扣" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import Map from "@/components/Map";
import HospitalApi from "@/api/institution/hospital";
import QRCode from 'qrcodejs2';
import OfficeApi from "@/api/institution/office";

export default {
  data() {
    return {
      hospitalData: "",
      fullscreenLoading: false,
      tableList: [],
      contractImageList: []
    }
  },
  components: {
    Map
  },
  methods: {
    getData() {
      HospitalApi.getHospital({hospitalId: this.$route.query.id})
        .then(res => {
          this.hospitalData = res.data;
          this.tableList = res.data.institutionRelation || [];
          if (res.data.contractImages) {
            this.contractImageList = res.data.contractImages.split(',');
          }
        })

      this.bindQRCode(this.$route.query.id)
    },
    bindQRCode(id) {
      new QRCode(this.$refs.qrCodeDiv, {
        text: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe7229f039bfe873b&redirect_uri=http%3A%2F%2Fh5.kanglailab.com%2FnucleicVisit&response_type=code&scope=snsapi_base&state=' + id,
        width: 320,
        height: 320,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
      })
    },
    createHsHb() {
      // 加载遮罩层
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      HospitalApi.createHsHb({hospitalId: this.$route.query.id})
        .then(res => {
          loading.close();
          if (res.status === 0 && res.data) {
            this.hospitalData.hsBillUrl = res.data;
          }
        })
        .catch(error => {
          loading.close();
          console.error(error);
          this.$message({
            message: error,
            type: 'warning'
          });
        });
    },
    viewHsHb() {
      window.open(this.hospitalData.hsBillUrl, "_blank");
    },
    downloadHsHb() {
      let url = this.hospitalData.hsBillUrl
      if (url) {
        let name = this.$Utils.getFileNameByUrl(url)
        this.$Utils.downloadByBlob(url, name)
      } else {
        this.$Utils.notifyWarn("未生成海报")
      }
    },
    formatDate(value) {
      return this.$Utils.formatDate(value, 'yyyy-MM-dd hh:mm:ss')
    },
    formatHospitalType(value) {
      if (value === 1) {
        return "合作医院";
      } else if (value === 2) {
        return "其他医院";
      }
    },
    formatIsRemind(value) {
      if (value === 0) {
        return "否"
      } else if (value === 1) {
        return "是"
      }
    },
    formatHsPayType(value) {
      if (value === 0) {
        return "月结"
      } else if (value === 1) {
        return "预约付款"
      } else if (value === 2) {
        return "采样付款"
      }
    },
    formatAddHeaderFlag(value) {
      if (value === 0) {
        return "否";
      } else if (value === 1) {
        return "是";
      }
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.push({path: '/institu/hospitalManagement'});
    }
  },
  mounted() {
    this.getData();
  }
}
</script>
<style lang="scss" src="@/assets/css/views/Detail.scss" scope>
</style>
<style scoped lang="scss">

.el-image {
  margin-top: 10px;
  width: 320px;
}

.poster-btn {
  padding-bottom: 10px;
}

.poster-btn button {
  width: 124px;
  height: 33px;
  border: solid 1px white;
  border-radius: 10px;
  font-size: 15px;
  color: white;
  margin: 0 5px;
  cursor: pointer;
}

.poster-btn button:nth-child(1) {
  background: #409EFF;
}

.poster-btn button:nth-child(1):hover {
  background: #66B1FF;
}

.poster-btn button:nth-child(2) {
  background: #FDF6EC;
  color: #E6A23C;
  border: solid 1px #E6A23C;
}

.poster-btn button:nth-child(2):hover {
  background: #E6A23C;
  color: white;
}

.poster-btn button:nth-child(3) {
  background: #F0F9EB;
  color: #67C23A;
  border: solid 1px #67C23A;
}

.poster-btn button:nth-child(3):hover {
  background: #67C23A;
  color: white;
}
</style>
